<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Horizontal Title</title>
</head>

<body>
  <div class="divider">
    <div class="divider__line"></div>
    <div class="divider__title"> Title </div>
    <div class="divider__line align-left"></div>
  </div>

  <style>
    :root {
      --border-size: 1px;
      --base-color: rgb(53, 218, 103);
    }

    .divider {
      display: flex;
      align-items: center;
    }

    .divider__title {
      margin: 0 5px;
    }

    .divider__line {
      flex-grow: 1;
      border-bottom: var(--border-size) solid var(--base-color);
    }

    .align-left {
      flex-grow: 10;
    }

  </style>

</body>

</html>
